<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title></title>
	<script src="js/jquery-1.11.3.min.js"></script>
	<script src="js/parabola.js"></script>
	<script src="js/hxsd_jquery_plugin.js"></script>
	<script src="js/hero.js"></script>
	<style type="text/css">
		body{-moz-user-select: none; -ms-user-select: none; -webkit-user-select: none;}
		.box1{position: absolute; left: 500px; top: 400px; width: 50px; height: 50px;}
		.box2{position: absolute; left: 1300px; top: 400px; width: 50px; height: 50px;}
		#p1{width: 100px; height: 100px; margin-right: 10px; float: left; position: absolute;z-index: 5; top: -25px; left: -25px;}
		#p1 img{position: absolute; left: -25px; top: -25px;}
		#p2 img{position: absolute; left: -25px; top: -25px;}
		#p2{width: 100px; height: 100px; margin-right: 10px; float: left; position: absolute; left: -25px; top: -25px; z-index: 5;}
		img{width: 150px; height: 150px;}
		.line1{width: 105px;height: 1px; background: #fff; border-top: 2px dotted #C81623; position: absolute; top: 27px; left: -75px; transform: rotate(145deg); transform-origin: right top;}
		.line2{width: 105px;height: 1px; background: #fff; border-top: 2px dotted #C81623; position: absolute; top: 27px; left: 25px; transform: rotate(145deg); transform-origin: left top;}
		.normal_ball1{width: 22px; height: 22px; border-radius: 50%; background: red; position: absolute; top: 14px; left: 14px;}
		.normal_ball2{width: 22px; height: 22px; border-radius: 50%; background: red; position: absolute; top: 14px; left: 14px;}
		.hide_dead{position: absolute; left: -200px; height: 50px; color: #ffff; line-height: 50px; background: #FF0000; z-index: 100; top: 300px; padding: 0 20px;}
		.hide_dead .btn{margin-right: 40px; padding: 0;}
		.li{padding: 0; margin: 0; padding-bottom: 20px;}
		.show{ color: #666666; font-size: 14px; font-family: "宋体";}
	</style>
</head>
<body>
	<p>tips:1.有瞄准线的一方为攻击方<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;2.移动鼠标选择角度，按下鼠标左键蓄力，松开时进行攻击<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;3.回合制游戏<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;4.游戏测试，最大角度，力度30</p>
	<p class="li">力度 <span id="lidu">0</span></p>
	<div class="box1">
		<div id="p1"><img src="images/boss2.png"/></div>
		<span class="line1"></span>
		<span class="normal_ball1"></span>
	</div>
	<div class="box2">
		<div id="p2"><img src="images/boss1.png"/></div>
		<span class="line2"></span>
		<span class="normal_ball2"></span>
	</div>
	<div class="hide_dead">
		<span id="txt"></span>
		<button id="btn">重新开始</button>
	</div>
	<div class="show">
		
	</div>
</body>
</html>
<script type="text/javascript">
	var luban = new Hero('luban',200,300,100,20);
	var user = new Hero('user',200,180,60,20);
	luban.deadFn = function(){
		$(".box1").remove();
		var remove = $(document).modal();
		$(".hide_dead #txt").html('鲁班死亡了').parent().animate({'left':0},1000);
	}
	user.deadFn = function(){
		$(".box2").remove();
		$(document).modal();
		$(".hide_dead #txt").html('鲁班死亡了').parent().animate({'left':0},1000);
	}
	$(".hide_dead #btn").click(function(){
	    location.reload();
	})
	var skills = [
		new Skill('一阳指',45,20),
		new Skill('六脉神剑',50,30),
		new Skill('大力金刚掌',65,40),
		new Skill('降龙十八掌',80,50),
		new Skill('独孤九剑',55,25),
	];
	
	var flag = true;
	var attacker;
	var timer;
	var speedRate = 40/180;
	var angle;
	var num;
	var x;
	var temp2;
	var temp1;
	
	var ball1=new Parabola({
		el:$(".normal_ball1"),
		curvature:0.002,
		duration:1500,
	});
	
	var ball2=new Parabola({
		el:$(".normal_ball2"),
		curvature:0.002,
		duration:1500,
	});
	
	begin();
	function begin(){
	    if (flag) {
	    	attacker = 1;
	    	$(".line1").show();
	    	$(".line2").hide();
	    }else{
	    	attacker = 2;
	    	$(".line2").show();
	    	$(".line1").hide();
	    }
	    
	    $(document).mousemove(function(ev){
			calAngle(ev.pageX,ev.pageY,attacker);
		});
		$(document).mousedown(function(){
			x = 0;
			clearInterval(timer);
			num = 0;
		    timer = setInterval(function(){
		        num++;
		        $("#lidu").html(num);
		    },100);
		})
	    $(document).mouseup(function(){
	    	if (x!= 0) return;
	    	$(".line"+attacker).hide();
			clearInterval(timer);
			if (attacker == 2) {
				angle = 180 - angle;
				x = 1;
			}
			var offset = parseInt(num*speedRate*angle);
			var rate = getRate(angle);
	    	shot(offset,rate,attacker);
		})
	}
    function shot (offset,rate,attacker) {
    	if (attacker == 2) {
    		temp2 = 0;
    		offset = -offset;
    		ball2.setOptions({
    			'offset':[offset,56],
    			'curvature': rate,
    			stepCallback:function(x,y){
					if (x>-870 && x< -750) {
						if(y > -30){
							if(temp2 == 0){
								var index = parseInt(Math.random()*skills.length);
								user.attackFn(luban,skills[index]);
								$("#p1 img").shake({num:10});
								temp2 = 1;
							}
							$(".normal_ball"+attacker).hide();
						}
					}
				},
				callback:function(){
					ball2.reset();
					$(".normal_ball2").show();
					temp2 = 0;
					flag = !flag;
					begin();
				},
    		});
    		ball2.start();
    	}else{
    		temp1 = 0;
    		ball1.setOptions({
    			'offset':[offset,56],
    			'curvature': rate,
    			stepCallback:function(x,y){
					if (x>753 && x<870) {
						if(y > -30){
							if (temp1 == 0) {
								var index = parseInt(Math.random()*skills.length);
								luban.attackFn(user,skills[index]);
								$("#p2 img").shake({num:10});
								temp1 = 1;
							}
							$(".normal_ball"+attacker).hide();
						}
					}
				},
				callback:function(){
					ball1.reset();
					$(".normal_ball1").show();
					flag = !flag;
					temp1 = 0;
					begin();
				},
    		});
    		ball1.start();
    	}
    }
    
  	//获得曲率
  	function getRate(angle){
  		var temp = 0.002/60;
		var num = angle-180;
		var rate = temp*-num;
		return rate;
  	}
  	function calAngle (x,y,attacker) {
  		var attacker = attacker;
  		if (attacker == 1) {
	  		var disY = $("#p1").offset().top+$('#p1').outerHeight()/2 - y;
		    var disX = $("#p1").offset().left+$('#p1').outerWidth()/2 - x;
		    if (disY > 0) {
			    var r = Math.sqrt(disX*disX + disY*disY);
			    var jiaodu = Math.acos(disX/r);
			    angle = Math.floor(180/(Math.PI/jiaodu));
				if (angle < 120) {
					angle = 120;
				}
			    $(".line"+attacker).css('transform','rotate('+angle+'deg)');
		    }
  		}else{
  			var disY = $("#p2").offset().top+$('#p2').outerHeight()/2 - y;
		    var disX = $("#p2").offset().left+$('#p2').outerWidth()/2 - x;
		    if (disY > 0) {
			    var r = Math.sqrt(disX*disX + disY*disY);
			    var jiaodu = Math.acos(disX/r);
			    angle = Math.floor(180/(Math.PI/jiaodu));
				if (angle > 60) {
					angle = 60;
				}
			    $(".line"+attacker).css('transform','rotate('+(angle+180)+'deg)');
		    }
  		}
  	}
</script>
